<template>
    <el-card class="border-0">
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="24">
                <el-col :span="8" :offset="0">
                    <el-form-item label="用户名">
                        <el-input v-model="searchForm.userName" placeholder="用户名" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="问答类型">
                        <el-select v-model="searchForm.askType">
                            <el-option v-for="(item, index) in askTypeList" :label="item.value" :value="item.code"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                        <!-- <el-button type="primary" @click="handleCreate">新增</el-button> -->
                    </div>
                </el-col>
            </el-row>

        </el-form>

        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="用户名" prop="userName" align="center"></el-table-column>
            <el-table-column label="问答类别" prop="tag" align="center"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>

            <el-table-column label="操作" align="center"  width="100">
                <template #default="scope">
                    <el-button @click="handleDetail(scope.row)" type="primary" size="small" text>详情</el-button>
                    <!-- <el-button @click="handleDetail(scope.row)" type="primary" size="small" text>详情</el-button> -->
                    <!-- <el-popconfirm title="确定删除合作伙伴吗?" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button type="primary" size="small" text>删除</el-button>
                        </template>
                    </el-popconfirm> 
                    -->
                </template>
            </el-table-column>
        </el-table>

        <FormDrawer size="60%" ref="formDrawerRef" :showSubBtn="false" title="问答详情" @isClosed="isClosed">
            <el-table :data="tableData_askItem" stripe style="width: 100%" height="500"
                :row-class-name="tableRowClassName">
                <el-table-column label="用户名" prop="userName" align="center"></el-table-column>
                <el-table-column label="提问来源" prop="tag" align="center"></el-table-column>
                <el-table-column label="发起者" prop="fromUser" align="center"></el-table-column>
                <el-table-column label="接收者" prop="toUser" align="center"></el-table-column>
                <el-table-column label="问题内容" prop="content" align="center"></el-table-column>
                <el-table-column label="时间" prop="createTime" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template #default="scope">
                        <el-button @click="handleAnswer(scope.row)" type="primary" size="small" text>回复</el-button>
                        <el-popconfirm v-if="scope.row.fromUser.includes('system')" title="确定删除回复吗?"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button type="primary" size="small" text>删除</el-button>
                            </template>
                        </el-popconfirm>

                    </template>

                </el-table-column>
            </el-table>
            <div class="flex items-center justify-center mt-1">
                <el-pagination background layout="prev, pager ,next" :total="searchForm_item.total"
                    :current-page="searchForm_item.pageNo" :page-size="searchForm_item.pageSize"
                    @current-change="getData_item" />
            </div>
        </FormDrawer>
    </el-card>

    <el-dialog v-model="dialogVisible_answer" title="回复" width="30%" :before-close="handleClose">
        <el-input v-model="answerFrom.content" :rows="2" type="textarea" placeholder="输入回复内容" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addAnswer">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ask_add_api, ask_deleteItem_api, ask_pageQuery_api, ask_pageQueryItem_api, sysDict_pageQuery_api } from '~/api/official_article_api';
import FormDrawer from "~/components/FormDrawer.vue";
import { toast, toastWarn } from "~/composables/util"

// ------------------ data -----------------------
const searchFormInitObject = {
    userName: '',
    askType: '',
    total: 1,
    pageNo: 1,
    pageSize: 10,
}

const searchForm = reactive(searchFormInitObject)
const askTypeList = ref([])
const tableData = ref([])
const tableData_askItem = ref([])
const searchForm_item = reactive({
    pageNo: 1,
    pageSize: 15,
    total: 1,
    askId: ''
})
const formDrawerRef = ref(null)
const dialogVisible_answer = ref(false)

const answerFrom = reactive({
    preId: '',
    content: ''
})

// ----------------- function ------------------

// 加载问答类型下拉框
function loadSysDict_askType() {
    sysDict_pageQuery_api({ parentCode: "askType" }).then(res => {
        askTypeList.value = res.records
    })
}

//查询表单
function getData() {
    ask_pageQuery_api(searchForm).then(res => {
        console.log('问答列表res:', res)
        tableData.value = res.records
    })
}

// 查看问答详情
function handleDetail(row) {
    searchForm_item.askId = row.id;
    getData_item()
    formDrawerRef.value.open()
}

function getData_item(e) {
    console.log("分页e: ", e)
    searchForm_item.pageNo = e;
    ask_pageQueryItem_api(searchForm_item).then(res => {
        console.log('对话详情res:', res)
        tableData_askItem.value = res.records;
        searchForm_item.total = res.total;
    })
}

function handleAnswer(row) {
    dialogVisible_answer.value = true
    console.log('row: ', row)
    answerFrom.preId = row.id
}
function handleClose() {
    dialogVisible_answer.value = false
}

function tableRowClassName({ row, rowIndex }) {
    console.log("row: ", row.fromUser)
    if (row.fromUser == 'system') {
        return 'answer-bg-system'
    }
    return ''
}

function addAnswer() {
    ask_add_api(answerFrom).then(res => {
        console.log('回复res: ', res)
        getData_item()
        toast('回复问题成功')
    })
    dialogVisible_answer.value = false
}

function handleDelete(row) {
    ask_deleteItem_api({ id: row.id }).then(res => {
        console.log('删除对话res:', res)
        console.log('删除row:', row)
        getData_item()
    })
}
// ------------------ 生命周期 -------------------

onMounted(() => {
    loadSysDict_askType();
    getData();
})

</script>

<style>
.answer-bg-system {
    background-color: #409eff;
}
</style>